<template>
  <el-table :data="findShopData" style="width: 100%" max-height="100%" border fit stripe :row-class-name="rowClassName">
    <el-table-column fixed prop="id" label="商家ID" min-width="70"/>
    <el-table-column fixed label="商家主图" min-width="80">
      <template v-slot={row}>
        <el-image style="width: 40px; height: 40px; margin-left:10px;"
                  :src=" 'http://localhost:8888/' + row.img "
        ></el-image>
      </template>
    </el-table-column>
    <el-table-column fixed prop="name" label="商家名称" min-width="220"/>
    <el-table-column prop="shopTypeNum" label="商家类型" fit/>
    <el-table-column prop="description" label="商家描述" min-width="220"/>
    <el-table-column prop="minDeliveryRate" label="起送费" fit/>
    <el-table-column prop="shippingPrice" label="配送费" fit/>
    <el-table-column label="店铺分" min-width="180">
      <template v-slot={row}>
        <el-rate
            v-model="row.score"
            disabled = true
            show-score
            text-color="#ff9900"
            score-template="{value}"
        >
        </el-rate>
      </template>
    </el-table-column>
    <el-table-column prop="monthSell" label="商家月售" fit/>
    <el-table-column prop="address" label="商家地址" min-width="220"/>
    <el-table-column label="店铺创建日期" min-width="130">
      <template v-slot={row}>
        <span v-text=" row.createDate "></span>
      </template>
    </el-table-column>
    <el-table-column prop="state" label="商家状态" fit/>
    <el-table-column fixed="right" label="编辑商家" min-width="175">
      <template v-slot={row}>
        <el-popconfirm
            confirm-button-text="确认"
            cancel-button-text="取消"
            icon="el-icon-delete"
            icon-color="red"
            :title=" '确认删除【' + row.name + '】吗' "
            @confirm="confirmEvent"
            @cancel="cancelEvent"
        >
          <template #reference>
            <el-button type="danger">删除</el-button>
          </template>
        </el-popconfirm>
        <el-button type="primary" plain @click="showModel=true">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>


  <!--  商家信息修改界面-->
  <el-dialog v-model="showModel">
    <el-card class="add-container">
      <el-form class="shopForm" ref="shopForm" :rules="shopFormRules" :model="shopForm" label-width="100px">
        <el-form-item label="店铺名称" prop="shopName">
          <el-input v-model="shopForm.shopName" placeholder="请输入店铺名称"></el-input>
        </el-form-item>
        <el-form-item label="店铺地址" prop="shopAddress">
          <el-input v-model="shopForm.shopAddress" placeholder="请输入店铺地址"></el-input>
        </el-form-item>
        <el-form-item label="店铺简介" prop="shopDescription">
          <el-input type="textarea" v-model="shopForm.shopDescription"
                    placeholder="请输入商品简介(100字)"></el-input>
        </el-form-item>
        <el-form-item label="起送费" prop="minDeliveryRate">
          <el-input-number v-model="shopForm.minDeliveryRate" :min="0" :max="999" @change="handleChange"/>
        </el-form-item>
        <el-form-item label="配送费" prop="shippingPrice">
          <el-input-number v-model="shopForm.shippingPrice" :min="0" :max="10" @change="handleChange"/>
        </el-form-item>
        <el-form-item label="店铺评分" prop="score">
          <el-input v-model="shopForm.score" :min="0.0" :max="5.0" @change="handleChange"/>
        </el-form-item>
        <el-form-item label="店铺主图" prop="shopImg">
          <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              accept="jpg,jpeg,png"
              :drag="true"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img style="width: 100px; height: 100px; border: 1px solid #e9e9e9;"
                 v-if="shopForm.shopImg"
                 :src="shopForm.shopImg" class="avatar" alt="店铺主图">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="店铺类型" prop="shopType">
          <el-select v-model="shopForm.shopType" placeholder="请选择店铺类型">
            <el-option
                v-for="item in shopTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="店铺状态" prop="state">
          <el-select v-model="shopForm.state" placeholder="请选择店铺状态">
            <el-option
                v-for="item in shopStateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交编辑</el-button>
          <el-button @click="showModel=false">取消编辑</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-dialog>

  <div id="page">
    <el-pagination
        background
        :page-size="pageSize"
        :pager-count="11"
        layout="prev, pager, next"
        :total="totalCount"
        @current-change="loadShop"
        v-model:current-page="CurrentPage"
    >
    </el-pagination>
  </div>
</template>


<script>
import {defineComponent, ref} from 'vue'
import request from "../../http/request";
import qs from "qs";

export default defineComponent({
  name: "EditShopInfo",
  data() {
    return {
      CurrentPage: 1,
      pageSize: 10,
      totalCount: 0,
      showModel: false,
      findShopData: [],
      shopForm: {
        shopName: '',
        shopAddress: '',
        shopDescription: '',
        minDeliveryRate: '',
        shippingPrice: '',
        shopType: '',
        shopImg: '',
        score: '5.0',
        state: '',
        month_sell: '',
      },
      shopFormRules: {
        score: [
          {pattern: /(^[0-4]?(\.[0-9])?$)|(^(0)$)|(^5?(\.0)?$)/, message: '请输入0.0到5.0范围小数'}
        ],
      },
    }
  },
  setup() {
    return {
      visible: ref([false, false, false, false, false]),
      shopTypeOptions: ref([
        {
          value: '1',
          label: '美食',
        },
        {
          value: '2',
          label: '早餐',
        },
        {
          value: '3',
          label: '跑腿代购',
        },
        {
          value: '4',
          label: '汉堡披萨',
        },
        {
          value: '5',
          label: '甜品饮品',
        },
        {
          value: '6',
          label: '速食简餐',
        },
        {
          value: '7',
          label: '地方小吃',
        },
        {
          value: '8',
          label: '米粉面馆',
        },
        {
          value: '9',
          label: '包子粥铺',
        },
        {
          value: '10',
          label: '炸鸡炸串',
        },
      ]),
      shopStateOptions: ref([
        {
          value: '-2',
          label: '封禁',
        },
        {
          value: '-1',
          label: '关闭',
        },
        {
          value: '0',
          label: '营业',
        },
        {
          value: '1',
          label: '休店',
        },
      ])
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    },
    rowClassName({row, rowIndex}) {
      //把每一行的索引放进row
      row.index = rowIndex;
    },
    loadShop: function (callback) {
      let param = qs.stringify({
        pageNo: this.CurrentPage,
        pageSize: this.pageSize,
      })
      request({
        url: "/shop/list?" + param,
        method: "get",
      }).then((data) => {
        if (data.code === 200){
          this.totalCount = data.data.total;
          data = data.data.list.map((item) => {
            let date = new Date(item.createDate);
            item.createDate = date.getFullYear()+"年"+date.getMonth()+"月"+date.getDate()+"日";
            item.score = item.score/10;
            return item;
          });
          this.findShopData = data;
          if (callback != null) {
            callback();
          }
        }else {
          alert(data.msg);
        }
      })
    },
  },
  mounted: function () {
    this.loadShop();
  }
})
</script>

<style scoped>
.btn {
  display: flex;
  justify-content: center;
}

#updatefrom {
  background-color: white;
  margin-top: 1vw;
  text-align: left;
  padding: 1vw 0;
}

</style>